<template>
  <div class="hope_new">

    <div class="background_FirstCharge">
      <header_ title="" :pathName="this.$store.state" background='#00000000' color='#000000' image_='1' size='4.8vw' />
      <img src="../../public/img/hope_new/shouchong6yuan.png" alt="" />
      <div class="prize">
        <div>
          <img src="../../public/img/hope_new/meiguihua.png" alt="" />
          <img src="../../public/img/hope_new/meiguihua-zi.png" alt="" />
        </div>
        <div>
          <img src="../../public/img/hope_new/touxiangkuang.png" alt="" />
          <img src="../../public/img/hope_new/xinrentouxiangkuang-zi.png" alt="" />
        </div>
      </div>
      <div class="Recharge" @click="torecharge">立即充值</div>
    </div>
    <div class="background_FirstCharge">
      <img src="../../public/img/hope_new/shouchon98yuan-biaoti.png" alt="" />
      <div class="prize prize_">
        <div>
          <img src="../../public/img/hope_new/meiguihua.png" alt="" />
          <img src="../../public/img/hope_new/meiguihua-zi.png" alt="" />
        </div>
        <div>
          <img src="../../public/img/hope_new/touxiangkuang.png" alt="" />
          <img src="../../public/img/hope_new/xinrentouxiangkuang-zi.png" alt="" />
        </div>
        <div id="three_xiaoxio">
          <img src="../../public/img/hope_new/Littlebear.png" alt="" />
          <img src="../../public/img/hope_new/xiaoxiojiajia.png" alt="" />
        </div>
      </div>
      <div class="Recharge" @click="torecharge">立即充值</div>
    </div>
    <div class="activityRrules">
      <div>
        <span>1、每个用户仅限首次充值获得</span>
        <span>2、充值6元及以上均可获得以上装扮</span>
        <span>3、获得头像框和座驾可用于个人装扮</span>
        <span>4、玫瑰花在礼物背包可见，用于抢每日达人榜</span>
        <span>5、最终解释权归主办方所有{{ isiOS ? ",与苹果公司无关" : "" }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import header_ from '../../components/header_'
  import wx from 'weixin-js-sdk'
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        isiOS: false,
      };
    },
    created() {
      if (window.isiOS) {
        this.isiOS = true;
      } else {
        this.isiOS = false;
      }
    },
    components: {
      header_
    },
    methods: {
      torecharge() {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/recharge/recharge",
          });
        } else {
          if (window.isiOS) {
            window.webkit.messageHandlers.pageJumpRecharge.postMessage({});
          } else {
            app.pageJumpRecharge();
          }
        }
      },

    },
  };
</script>
<style scoped>
  .activityRrules>div>span:nth-of-type(1) {
    padding-top: 12vw;
  }

  .activityRrules>div>span {
    color: #ffffff;
    font-size: 3.3vw;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 6vw;
  }

  .activityRrules>div {
    width: 80vw;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
  }

  .activityRrules {
    width: 96vw;
    height: 48vw;
    margin: 4.8vw auto 6vw;
    background: url("../../public/img/hope_new/huodongguize-beijingkuang.png") no-repeat;
    background-size: 100%;
  }

  #three_xiaoxio>img:nth-of-type(1) {
    position: absolute;
    width: 25vw;
    height: 24vw;
    top: 1vw;
  }

  #three_xiaoxio>img:nth-of-type(2) {
    position: absolute;
    height: 5.8vw;
    padding-top: 0;
    bottom: 3.5vw;
  }

  #three_xiaoxio {
    position: relative;
    width: 30vw;
    height: 30vw;
  }

  .hope_new>div:nth-of-type(1) {
    margin-top: 100vw;
  }

  .Recharge {
    width: 38vw;
    background: url("../../public/img/hope_new/lijichongzhikuang.png") no-repeat;
    background-size: 100%;
    border-radius: 5vw;
    font-size: 4.4vw;
    font-family: Lantinghei SC;
    font-weight: 600;
    color: #ffffff;
    padding: 1.9vw 2.3vw;
    margin: 2vw auto 0;
    letter-spacing: 1px;
  }

  .prize>div>img:nth-of-type(1) {
    width: 15.5vw;
    height: 15.9vw;
  }

  .prize>div>img:nth-of-type(2) {
    height: 5.8vw;
    padding-top: 1.5vw;
  }

  .prize>div {
    background: url("../../public/img/hope_new/shouchong6.png") no-repeat;
    background-size: 100%;
    width: 30vw;
    height: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .background_FirstCharge>.prize {
    width: 70vw;
    margin: 1vw auto;
    height: 30vw;
    display: flex;
    justify-content: space-between;
  }

  .background_FirstCharge>.prize_ {
    width: 90vw;
    margin: 1vw auto;
    height: 30vw;
    display: flex;
    justify-content: space-between;
  }

  .background_FirstCharge>img {
    width: 70vw;
    height: 9vw;
    margin: -3vw auto 0;
  }

  .background_FirstCharge {
    width: 96vw;
    margin: 4.8vw auto;
    height: 56vw;
    background: url("../../public/img/hope_new/Initialcharge6yuan.png") no-repeat;
    background-size: 100%;
  }

  .hope_new {
    width: 100vw;
    overflow: auto;
    background: url("https://img.xunyinjiaoyou.com/static/activity/shouchong/beijingtu-shouchong.png") no-repeat;
    background-size: 100%;
    text-align: center;
  }
</style>